<template>
    <footer class="tab-bar flex-center">
    <router-link to="/" class="tab-item flex-center-center">
      <div class="tab-icon">
        <img
          v-if="$route.fullPath === '/'"
          src="https://www.ytblike.com/static/tabbar/home_cur.png"
          alt="">
          <img
          v-else
          src="https://www.ytblike.com/static/tabbar/home_cur.png"
          alt="">
      </div>
      <div class="tab-label">
        <p class="content">排行榜</p>
      </div>
    </router-link>
    <router-link to="/about" class="tab-item flex-center-center">
      <div class="tab-icon">
        <img
          v-if="$route.fullPath === '/about'"
          src="https://www.ytblike.com/static/tabbar/home_cur.png"
          alt="">
          <img
          v-else
          src="https://www.ytblike.com/static/tabbar/home_cur.png"
          alt="">
      </div>
      <div class="tab-label">
        <p class="content">排行榜</p>
      </div>
    </router-link>
    <router-link to="/about" class="tab-item flex-center-center">
      <div class="tab-icon">
        <img
          v-if="$route.fullPath === '/about'"
          src="https://www.ytblike.com/static/tabbar/home_cur.png"
          alt="">
          <img
          v-else
          src="https://www.ytblike.com/static/tabbar/home_cur.png"
          alt="">
      </div>
      <div class="tab-label">
        <p class="content">排行榜</p>
      </div>
    </router-link>
    <router-link to="/about" class="tab-item flex-center-center">
      <div class="tab-icon">
        <img
          v-if="$route.fullPath === '/about'"
          src="https://www.ytblike.com/static/tabbar/home_cur.png"
          alt="">
          <img
          v-else
          src="https://www.ytblike.com/static/tabbar/home_cur.png"
          alt="">
      </div>
      <div class="tab-label">
        <p class="content">排行榜</p>
      </div>
    </router-link>
    <router-link to="/about" class="tab-item flex-center-center">
      <div class="tab-icon">
        <img
          v-if="$route.fullPath === '/about'"
          src="https://www.ytblike.com/static/tabbar/home_cur.png"
          alt="">
          <img
          v-else
          src="https://www.ytblike.com/static/tabbar/home_cur.png"
          alt="">
      </div>
      <div class="tab-label">
        <p class="content">排行榜</p>
      </div>
    </router-link>
  </footer>
</template>
<script>
export default {
    name: 'tab-bar'
}
</script>
<style lang="scss" scoped>
.tab-bar{
  height: 50px;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 99;
  background: #000000;
  .tab-item{
    width: 20%;
    height: 50px;
    flex-direction: column;
    font-size: 12px;
    .tab-icon{
      width: 25px;
      img{
        width: 100%;
      }
    }
  }
}
</style>